import React, { Component } from 'react'
import { CSSTransition } from 'react-transition-group';
import { Link } from 'react-router-dom'
import { 
        HeadWrapper, Logo, Nav, NavItem, Navsearch,
        Addition, Button, NavWrapper, SearchInfo, SearchInfoTitle, 
        SearchInfoHeader, SearchInfoSwitch, SearchInfoBody, SearchInfoList }
      from './style.js'
import { connect } from 'react-redux'
import  { actionCreater } from './store'
import  { actionCreater as loginActionCreater} from '../../pages/login/store'

class Header extends Component{
    
    switchChange(){
        const {focused, mouseIn, list, page, localpage, handleMouseEnter, handleMouseLeave, handleChangePage} = this.props//解构赋值
        const pageList=[];
        const newList = list.toJS();
        if(newList.length){
            for(let i = (page-1) *10; i < page *10; i++){
                pageList.push(
                <SearchInfoList key = {newList[i]}>{newList[i]}</SearchInfoList>)
             }
        }
       
        if(focused || mouseIn){
            return( <SearchInfo 
            onMouseEnter = {handleMouseEnter}
            onMouseLeave = {handleMouseLeave}>
                    <SearchInfoHeader>
                        <SearchInfoTitle>
                           热门搜索
                        </SearchInfoTitle>
                       
                        <SearchInfoSwitch onClick = {() => {handleChangePage(page, localpage, this.spinIcon)}}>
                            换一批
                        </SearchInfoSwitch>
                        <i ref={(icon) => {this.spinIcon = icon}} className="iconfont spin">&#xe851;</i>
                    </SearchInfoHeader>
                    <SearchInfoBody>
                        { pageList }
                    </SearchInfoBody>
                </SearchInfo>
            )
    }else{
        return null;
    }
    }
    render(){
        const {focused, handleFocus, handleBlur, list, login, handleLogout} = this.props
        return(
            <HeadWrapper>
                <Link to = '/'>
                   <Logo/>
                </Link>
                <Nav>
                    <NavItem className = 'left active' >首页</NavItem>
                    <NavItem className = 'left' >下载App</NavItem>
                    {
                        login? <NavItem onClick= {handleLogout} className = 'right ' >退出</NavItem> 
                        : <Link to= '/login' ><NavItem className = 'right ' >登录</NavItem></Link> 
                    }
                    
                    <NavItem className = 'right' >
                    <i className="iconfont">&#xe607;</i>
                    </NavItem>
                    <NavWrapper>
                     <CSSTransition
                        in = {focused}
                        timeout = {200}
                        classNames ={{
                            enter:'sliding-enter',
                            enterActive:'sliding-enter-active',
                            exit:'sliding-exit',
                            exitActive:'sliding-exit-active'
                        }}
                       >
                         <Navsearch className={focused ? 'focused' : ''}
                            onFocus = {() => {handleFocus(list)}}
                            onBlur = {handleBlur}
                         />
                    </CSSTransition> 
                    <i className={focused  ? 'focused iconfont zoom' : 'iconfont zoom'}>&#xe64d;</i>
                    {this.switchChange()}
                    </NavWrapper>
                    <Addition>
                        <Button className = 'writter' >
                        <i className="iconfont">&#xe645;</i>
                        写文章
                        </Button>
                        <Button className = 'reg' >注册</Button>
                    </Addition>
           </Nav>
            </HeadWrapper>
        )
    }
}

const  mapStateToProps = (state) => {
        return{
            focused: state.getIn(['header', 'focused']),
            list: state.getIn(['header', 'list']),
            page: state.getIn(['header', 'page']),
            localpage: state.getIn(['header', 'localpage']),
            mouseIn: state.getIn(['header', 'mouseIn']),
            login: state.getIn(['login', 'login'])
        }
}
const mapDispatchToProps = (dispatch) => {
    return{
        handleFocus(list){
            if(list.size===0){
               dispatch(actionCreater.getList())
            }
           
            dispatch(actionCreater.searchFocus());
        },
        handleBlur(){
            dispatch(actionCreater.searchBlur());
        },
        handleMouseEnter(){
            dispatch(actionCreater.mouseEnter())
        },
        handleMouseLeave(){
            dispatch(actionCreater.mouseLeave())
        },
        handleChangePage(page, localpage, spin){
            let originAngle = spin.style.transform.replace(/[^0-9]/ig,'')
            if(originAngle){
                originAngle = parseInt(originAngle,10);
            }else{
                originAngle = 0;
            }
            spin.style.transform ='rotate('+(originAngle+360)+'deg)'
            if( page < localpage){
                dispatch(actionCreater.changePage(page+1))
            }else{
                dispatch(actionCreater.changePage(1))
            }
           
        },
        handleLogout(){
            dispatch(loginActionCreater.logout())
        }
    
    }
}
export default connect( mapStateToProps,mapDispatchToProps )(Header)